<template>
    <div class="rightMain">
        <!-- 右边小盒子 -->
        <ul>
            <li v-for="(v, i) in MainRightObj" :key="v.workpieceId">
                <div class="icon" v-show="isbool">

                    <img v-if="v.status === 0" src="../../../assets/imgx/Warning_icon.png" alt="">
                    <img v-else-if="v.status === 1" src="../../../assets/imgx/Reminder_icon.png" alt="">
                </div>
                <div class="Reight_Image" v-if="v.status === 0"
                    :style="{ 'border': v.status === 0 ? '0.5px solid #fd6a6f' : '0.5px solid white' }">
                    <div class="child-img">
                        <img :src="imageUrl + v.workpieceImage" alt="">
                    </div>
                    <p>上次维护时间{{ $moment(v.updateTime).format('LT') }} 维护保养倒计时{{ v.maintainDuration - v.timeSpent }}h</p>

                </div>
                <div class="Reight_Image" v-else-if="v.status === 1"
                    :style="{ 'border': v.status === 1 ? '0.5px solid yellow' : '0.5px solid white' }">
                    <div class="child-img">
                        <img :src="imageUrl + v.workpieceImage" alt="">
                    </div>
                    <p>上次维护时间{{ $moment(v.updateTime).format('LT') }} 维护保养倒计时{{ v.maintainDuration - v.timeSpent }}h</p>

                </div>
                <div class="Reight_Image" v-else>
                    <div class="child-img">
                        <img :src="imageUrl + v.workpieceImage" alt="">
                    </div>
                    <p>上次维护时间{{ $moment(v.updateTime).format('LT') }} 维护保养倒计时{{ v.maintainDuration - v.timeSpent }}h</p>
                </div>

                <div class="Reight_title">
                    <div class="Reight_Title_Left">{{ v.workpieceName }}</div>
                    <div class="Reight_Title_Reight">
                        <div @click="MaintenanceSteps(v)">维护步骤</div>
                        <div @click="MaintenanceCompleted(v.workpieceId)">保养完毕</div>
                    </div>
                </div>
            </li>

        </ul>

        <div class="zzc1" v-show="MaintenanceStepsBool">
            <slotcon>
                <template v-slot:com>
                    <div class="listzzc_2">
                        <div class="listzzc_3">

                            <div class="top">
                                <div class="left">
                                    步骤
                                </div>
                                <div class="center">
                                    <img src="../../../assets/imgx/message-bg.png" alt="">
                                    <div class="off1" @click="MaintenanceStepsBool = false">×</div>

                                </div>
                            </div>
                            <div class="button">
                                <lookviews :item="item" />
                            </div>
                        </div>
                    </div>
                </template>
            </slotcon>
        </div>
    </div>
</template>

<script>
import { maintenanceWork } from "@/api/homeModeApi/index"
export default {
    props: ['MainRightObj'],
    components: {
        slotcon: () => import('@/components/SslotCom/index.vue'),
        lookviews: () => import("../Mainright/lookviews/index"),
    },
    computed: {
        imageUrl() {
            return window.location.origin + '/'
        }
    },
    data() {
        return {
            isbool: false,
            item: [],
            MaintenanceStepsBool: false,
            timer: ""
        }
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    mounted() {
        this.timer = setInterval(() => {
            this.isbool = !this.isbool
        }, 1000)
    },

    methods: {
        //保养完毕
        MaintenanceCompleted(item) {
            maintenanceWork({
                workpieceId: item
            }).then(res => {
                this.$emit("MainChildEmit")
            })
        },
        //保养步骤
        MaintenanceSteps(item) {
            this.item = item.maintainStepUrl;
            this.MaintenanceStepsBool = true;
        },

    }
}
</script>
<style lang="less" scoped>
.rightMain ul {
    overflow-x: hidden;
    overflow-y: auto;
    color: #000;
    font-size: 56px;
    font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, "黑体", Arial, Tahoma;
    height: 100%;
    align-content: flex-start;
    /*子元素之间取消空白间隙，并把项目放在容器顶部。*/

}

/*滚动条样式*/
.rightMain ul::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 2px;
}

.rightMain ul::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: rgba(96, 150, 225, 1);
    background: rgba(96, 150, 225, 1);
    height: 2px;

}

.rightMain ul::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: rgba(96, 150, 225, 1);
    border-radius: 0;

}

.rightMain {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
    border: .5px solid #113D71;

    .zzc1 {
        position: absolute;
        background: red;
        height: 80%;
        right: 0;
        background: rgba(16, 45, 92, 0.5) linear-gradient(180deg, rgba(16, 45, 92, 0.5) 0%, #0C2041 0%, rgba(16, 45, 92, 0.5) 0%);
        box-shadow: inset 0px 0px 1600px 0px #010816;
        background: #091123;
        border: 1px solid #113D71;
        overflow: auto;
        z-index: 2023;

        .listzzc_2 {
            width: 100%;
            height: 100%;

            background: rgb(3 55 139 / 36%);

            .listzzc_3 {
                width: 100%;
                height: 100%;
                box-shadow: inset 0px 0px 54px 0px #0d3eb8b5;
                display: flex;
                flex-direction: column;

                .top {
                    width: 100%;
                    height: 30px;
                    position: relative;
                    display: flex;
                    color: white;

                    .left {
                        width: 60px;
                        height: 100%;
                        text-align: center;
                        line-height: 30px;
                    }

                    .center {
                        width: 90%;
                        height: 100%;
                        position: relative;

                        img {
                            width: 100%;
                            height: 100%;
                        }

                        .off1 {
                            width: 18px;
                            height: 18px;
                            text-align: right;
                            font-size: 36px;
                            font-weight: bold;
                            color: #0E66B3;
                            z-index: 99;
                            cursor: pointer;
                            line-height: 22px;
                            position: absolute;
                            right: 13px;
                            top: 0px;
                        }
                    }

                }

                .button {
                    width: 100%;
                    height: 100%;
                    overflow: auto;


                }
            }
        }
    }

    ul {
        width: 100%;
        display: flex;
        list-style: none;
        flex-direction: row;
        flex-wrap: wrap;
        position: absolute;
        justify-content: flex-start;
        grid-template-columns: repeat(auto-fill, 330px);
        grid-gap: 0 1px;
        margin-left: 10px;

        li {
            width: 316px;
            height: 220px;
            position: relative;
            flex: none;
            padding: 10px 5px;

            .icon {
                width: 32px;
                height: 32px;
                position: absolute;
                top: -28px;
                right: 1px;
                z-index: 1;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .Reight_Image {
                border: 1px solid #00479D;
                width: 100%;
                height: 80%;
                position: relative;
                background: rgba(0, 10, 31, 1);

                .child-img {
                    width: 100%;
                    max-height: 840px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    img {
                        max-height: 150px;
                        max-width: 100%;
                    }
                }

                p {
                    width: 314px;
                    height: 29px;
                    background: linear-gradient(60deg, #01204E 0%, #000D23 100%);
                    ;
                    position: absolute;
                    bottom: 0;
                    font-size: 12px;
                    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                    font-weight: 400;
                    color: #1575B8;
                    line-height: 29px;
                }
            }

            .Reight_title {

                width: 100%;
                height: 20%;
                display: flex;
                font-size: 16px;

                .Reight_Title_Left {
                    width: 50%;
                    height: 40px;
                    color: white;
                    line-height: 40px;
                    overflow-x: auto;
                }


                .Reight_Title_Reight {
                    width: 50%;
                    height: 40px;
                    line-height: 40px;
                    display: flex;
                    color: white;
                    align-items: center;
                    cursor: pointer;

                    div {

                        margin: 0px 2px;
                        width: 208px;
                        height: 21px;
                        border-radius: 10.5px 10.5px 10.5px 10.5px;
                        text-align: center;
                        line-height: 21px;
                        font-size: 10px;
                        background: linear-gradient(360deg, #115697 0%, #0F3677 100%);
                        opacity: 1;
                    }

                }
            }
        }
    }

}

::-webkit-scrollbar {

    display: none;
}

.el-card {
    background: none;
    border: 0px;
}

.el-card__body,
.el-main {
    height: 169px;
    padding: 0;

}

.el-timeline-item__node--normal {
    left: 13px;
    width: 14px;
    top: 53px;
    height: 12px;
}

.rightMain .zzc1 .listzzc_2 .listzzc_3 .button .el-timeline .el-timeline-item[data-v-5fc3543c] {
    width: 100%;
    height: 145px;
}
</style>